
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Tutorial Project: Calculator &#8212; wxGlade 1.1.0b1 documentation</title>
    <link rel="stylesheet" href="_static/classic.css" type="text/css" />
    <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
    <link rel="stylesheet" href="_static/css/custom.css" type="text/css" />
    <script type="text/javascript">
      var DOCUMENTATION_OPTIONS = {
        URL_ROOT:    './',
        VERSION:     '1.1.0b1',
        COLLAPSE_INDEX: false,
        FILE_SUFFIX: '.html',
        HAS_SOURCE:  true,
        SOURCELINK_SUFFIX: '.txt'
      };
    </script>
    <script type="text/javascript" src="_static/jquery.js"></script>
    <script type="text/javascript" src="_static/underscore.js"></script>
    <script type="text/javascript" src="_static/doctools.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Create and Use Source Code" href="source_code.html" />
    <link rel="prev" title="wx Basics" href="wxbasics.html" /> 
  </head>
  <body>
    <div class="related" role="navigation" aria-label="related navigation">
      <h3>Navigation</h3>
      <ul>
        <li class="right" style="margin-right: 10px">
          <a href="genindex.html" title="General Index"
             accesskey="I">index</a></li>
        <li class="right" >
          <a href="source_code.html" title="Create and Use Source Code"
             accesskey="N">next</a> |</li>
        <li class="right" >
          <a href="wxbasics.html" title="wx Basics"
             accesskey="P">previous</a> |</li>
        <li class="nav-item nav-item-0"><a href="index.html">wxGlade 1.1.0b1 documentation</a> &#187;</li> 
      </ul>
    </div>  

    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body" role="main">
            
  <div class="section" id="tutorial-project-calculator">
<h1>Tutorial Project: Calculator<a class="headerlink" href="#tutorial-project-calculator" title="Permalink to this headline">¶</a></h1>
<div class="section" id="part-1-create-calculator-window-and-the-first-widget">
<h2>Part 1: Create Calculator window and the first widget<a class="headerlink" href="#part-1-create-calculator-window-and-the-first-widget" title="Permalink to this headline">¶</a></h2>
<p>In this section we will go through the steps to create the simple calculator window from the previous page. In later sections we will modify it to highlight certain features like other sizer types, menus and status bars.</p>
<div class="section" id="create-the-basic-structure">
<h3>Create the basic structure:<a class="headerlink" href="#create-the-basic-structure" title="Permalink to this headline">¶</a></h3>
<ol class="arabic simple">
<li>Select “File-&gt;New” to <strong>create a new file</strong> and “File-&gt;Save” to save a .wxg file to a directory.</li>
<li><strong>Add the frame</strong>:<ul>
<li>click on the Frame icon <img alt="frame" src="_images/frame.png" /> on the “Windows” line of the <em>Palette</em> panels</li>
<li>as class name, enter <span class="guilabel">CalculatorFrame</span>: <a class="reference internal" href="_images/NewFrame_CalculatorFrame.png"><img alt="New Frame dialog" src="_images/NewFrame_CalculatorFrame.png" style="width: 30px;" /></a></li>
<li>leave “Add panel and sizer” checked</li>
</ul>
</li>
<li>A frame with a panel and a sizer <img alt="sizer" src="_images/sizer.png" /> with one slot is now visible in the <em>Tree</em> view and the <em>Design</em> window
(there the slot is visualized by a hatched area)</li>
<li>To extend the <strong>vertical box sizer</strong> to six slots:<ul>
<li>go to the slot in the <em>Tree</em> view or the <em>Design</em> window</li>
<li>use right mouse click “Add slots” or hit <code class="kbd docutils literal"><span class="pre">Ctrl-Shift-A</span></code></li>
<li>select <span class="guilabel">5</span> and hit <span class="guilabel">OK</span></li>
<li>alternatively you may hit <code class="kbd docutils literal"><span class="pre">Ctrl-A</span></code> five times</li>
</ul>
</li>
</ol>
<ol class="arabic simple" start="6">
<li>Now add a <strong>horizontal box sizer</strong> to the first slot:<ul>
<li>in the <em>Palette</em> on the “Sizer” line click on the BoxSizer icon <img alt="sizer" src="_images/sizer.png" /> to start the placement</li>
<li>in the <em>Tree</em> view or the <em>Design</em> window, click on the first slot to place the sizer there</li>
<li>a dialog will open</li>
<li>set “Orientation”  to <span class="guilabel">Horizontal</span> and the number of slots to <span class="guilabel">2</span>  <a class="reference internal" href="_images/NewSizer_CalculatorHorizontal.png"><img alt="New Sizer dialog" src="_images/NewSizer_CalculatorHorizontal.png" style="width: 30px;" /></a></li>
</ul>
</li>
<li>Place a <strong>StaticText</strong> <img alt="static_text" src="_images/static_text.png" /> as label (found on the “Static” line of <em>Palette</em>) in the top left slot.
You will be asked to enter a label text. Enter <span class="guilabel">Value 1:</span> for this.</li>
<li>Place a <strong>TextControl</strong> <img alt="text_ctrl" src="_images/text_ctrl.png" /> (found on the “Inputs” line) in the top right slot</li>
</ol>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">It would be possible to place sizer and controls directly on the frame, but usually a panel is added first,
as a frame is really just a frame around the other things. <br/>
Especially for Windows, always add a panel to have correct background colours and keyboard navigation
between widgets (using the <code class="kbd docutils literal"><span class="pre">Tab</span></code> key)</p>
</div>
</div>
<div class="section" id="adjust-properties">
<h3>Adjust properties:<a class="headerlink" href="#adjust-properties" title="Permalink to this headline">¶</a></h3>
<p><strong>Your design should now look like this:</strong></p>
<table border="1" class="docutils">
<colgroup>
<col width="100%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td><a class="first last reference internal image-reference" href="_images/Calculator_01.png"><img alt="_images/Calculator_01.png" src="_images/Calculator_01.png" style="width: 200px;" /></a>
</td>
</tr>
</tbody>
</table>
<p>The window title is not meaningful. <br/>
Also, layout and alignment need to be changed, but we’ll change this later on.</p>
<p><strong>So, some properties of the label and the text need to be modified:</strong></p>
<ol class="arabic simple">
<li>Select the frame in the <em>Tree</em> or the <em>Design</em> window.</li>
<li>If not yet visible, make the <em>Properties</em> notebook of the main window visible by dragging the sashes
(the separators between the three parts of the main window).</li>
<li>Go to <em>Properties -&gt; Widget -&gt; Title</em> and change it from <span class="guilabel">frame</span> to <span class="guilabel">Calculator</span>.</li>
</ol>
<blockquote>
<div>(You could also edit the title directly in the <em>Tree</em> window by clicking into the label and/or pressing <code class="kbd docutils literal"><span class="pre">F2</span></code>.)</div></blockquote>
<ol class="arabic simple" start="4">
<li>You may want to define a default size for the frame: <br/>
Go to <em>Properties -&gt; Common -&gt; Size</em> and set it to <span class="guilabel">400,300</span>. <br/>
Without this, the frame will be created with the minimum possible size to fit all controls.</li>
</ol>
<p>This file can be found in the folder <code class="docutils literal"><span class="pre">wxglade/examples/Calculator</span></code>:
<a class="reference external" href="../../examples/Calculator/Calculator-01.wxg">Calculator-01.wxg</a></p>
</div>
</div>
<div class="section" id="part-2-add-the-remaining-rows-and-widgets">
<h2>Part 2: Add the remaining rows and widgets<a class="headerlink" href="#part-2-add-the-remaining-rows-and-widgets" title="Permalink to this headline">¶</a></h2>
<p>We need almost the same combination of sizer+label+text for the second value and the result, so we’ll copy the horizontal sizer including it’s content from the first to the third and fifth slot of the vertical sizer.
Having done so, we will modify the label fields of the newly copied wxStaticText widgets to <span class="guilabel">Value 2</span> and <span class="guilabel">Result</span> (consistent with the layout for the calculator presented on the <a class="reference internal" href="wxbasics.html"><span class="doc">wx Basics</span></a> page).
<br/>
After that, we’ll add the “Operator” radio box and the buttons.</p>
<div class="section" id="there-are-several-methods-to-copy">
<h3>There are several methods to copy:<a class="headerlink" href="#there-are-several-methods-to-copy" title="Permalink to this headline">¶</a></h3>
<ul class="simple">
<li><strong>Copy &amp; Paste in Design Window:</strong></li>
</ul>
<blockquote>
<div><ul class="simple">
<li>select the “handle” of the sizer, which is shown in red here: <a class="reference internal" href="_images/SizerHandle.png"><img alt="Sizer Handle" src="_images/SizerHandle.png" style="width: 30px;" /></a></li>
<li>then hit <code class="kbd docutils literal"><span class="pre">Ctrl-C</span></code> to copy the selected sizer (or use the context menu)</li>
<li>select the third, empty slot, where you want to place a copy; it will be hatched in blue</li>
<li>then hit <code class="kbd docutils literal"><span class="pre">Ctrl-V</span></code> (or use the context menu)</li>
<li>select the fith, empty slot</li>
<li>then hit <code class="kbd docutils literal"><span class="pre">Ctrl-V</span></code> (or use the context menu)</li>
</ul>
</div></blockquote>
<ul class="simple">
<li><strong>Copy &amp; Paste in the Tree view of the main Window:</strong></li>
</ul>
<blockquote>
<div><ul class="simple">
<li>select the sizer node</li>
<li>then hit <code class="kbd docutils literal"><span class="pre">Ctrl-C</span></code> to copy the selected sizer (or use the context menu)</li>
<li>select the third, empty slot, where you want to place a copy</li>
<li>then hit <code class="kbd docutils literal"><span class="pre">Ctrl-V</span></code> (or use the context menu)</li>
<li>select the fith, empty slot</li>
<li>then hit <code class="kbd docutils literal"><span class="pre">Ctrl-V</span></code> (or use the context menu)</li>
</ul>
</div></blockquote>
<p>You may of course copy in the <em>Design</em> window and paste into the <em>Tree</em> or vice versa.</p>
<ul class="simple">
<li><strong>Drag &amp; Drop in Design Window:</strong></li>
</ul>
<blockquote>
<div><ul class="simple">
<li>hold the <code class="kbd docutils literal"><span class="pre">Ctrl</span></code> key and drag the sizer handle to the empty slot</li>
</ul>
</div></blockquote>
<ul class="simple">
<li><strong>Drag &amp; Drop in the Tree view of the main Window:</strong></li>
</ul>
<blockquote>
<div><ul class="simple">
<li>hold the <code class="kbd docutils literal"><span class="pre">Ctrl</span></code> key and drag the sizer node / icon in the <em>Tree</em> view to the empty slot</li>
</ul>
</div></blockquote>
<p>If you don’t hold the <code class="kbd docutils literal"><span class="pre">Ctrl</span></code> key, the item will not be copied, but moved.</p>
<p>You may drag items between different windows, e.g. from <em>Design</em> window to the <em>Tree</em> view or to another
running wxGlade instance.</p>
</div>
<div class="section" id="further-editing">
<h3>Further Editing<a class="headerlink" href="#further-editing" title="Permalink to this headline">¶</a></h3>
<p>The TextCtrl adjacent to the “Result” StaticText should display multiple lines of text and should not be editable.
To modify accordingly, just follow these steps:</p>
<blockquote>
<div><ol class="arabic simple">
<li>Select the text control <span class="guilabel">txt_ctrl_3</span> <br/> (depending on the exact steps of editing, the name might be slightly different)</li>
<li>Go to <em>Properties -&gt; Widget</em></li>
<li>In the section “Style”, enable <span class="guilabel">wxTE_MULTILINE</span> and <span class="guilabel">wxTE_READONLY</span></li>
<li>Go to <em>Properties -&gt; Common</em></li>
<li>Click the “…” button right to <span class="guilabel">Background</span> and select
<span class="guilabel">System Colour: wxSYS_COLOUR_BTNFACE</span> or <br/>
another colour or just enter <span class="guilabel">wxSYS_COLOUR_BTNFACE</span> into the text control.</li>
</ol>
</div></blockquote>
<p>The last step is to have a grey background.
For single line read-only text controls, this is done automatically by wx, but not with multiple lines.</p>
<p><strong>In the next steps fill the remaining slots of the main sizer:</strong></p>
<ul class="simple">
<li>insert a two-slot horizontal sizer with a label <span class="guilabel">Operator:</span> and a radio box into SLOT 1 <img alt="radio_box" src="_images/radio_box.png" /></li>
<li>place a horizontal line into SLOT 3 <img alt="static_line" src="_images/static_line.png" /></li>
<li>insert a two-slot horizontal sizer with two buttons into SLOT 5 <img alt="button" src="_images/button.png" /></li>
<li>For the first button, select the checkbox <em>Properties -&gt; Widget -&gt; Default</em>. <br/>
This will make this button the default one, i.e. when the user hits Enter it will have the same effect as
pressing this default button.</li>
</ul>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<ul class="last simple">
<li>When you want to place multiple elements of the same type,
just hold the <code class="kbd docutils literal"><span class="pre">Ctrl</span></code> key when placing an element to stay in placement mode (on Mac OS use the <code class="kbd docutils literal"><span class="pre">Shift</span></code> key).</li>
<li>When you have placed an element in the wrong slot,
just drag it to the right slot or delete it with the <code class="kbd docutils literal"><span class="pre">Del</span></code> key or the context menu.</li>
</ul>
</div>
<p><strong>Define the options “+-*/” for the radio box by going to the “Widget” tab:</strong></p>
<table border="1" class="docutils">
<colgroup>
<col width="50%" />
<col width="50%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td><ul class="first last simple">
<li>Select the label in the <em>Tree</em> or the <em>Design</em> window.</li>
<li>Hit “Add” to add choices, modify them and then hit the “Apply” button.</li>
<li>See the bottom part of the screenshot:</li>
</ul>
</td>
<td><a class="reference internal" href="_images/Calculator_Radio.png"><img alt="Calculator_Radio" src="_images/Calculator_Radio.png" style="height: 160px;" /></a></td>
</tr>
</tbody>
</table>
</div>
<div class="section" id="change-labels-and-names">
<h3>Change labels and names:<a class="headerlink" href="#change-labels-and-names" title="Permalink to this headline">¶</a></h3>
<p>After copying, the controls will have default values and names. Usually you have to change them.
You can do this in the <em>Properties</em> notebook or directly in the <em>Tree</em> view of the main window.
To edit in the <em>Tree</em> view, you can select and then click on the label or press <code class="kbd docutils literal"><span class="pre">F2</span></code>.</p>
<p>This needs to be done now:</p>
<ul class="simple">
<li>Set the names of the text controls to <span class="guilabel">text_value1</span>, <span class="guilabel">text_value2</span> and <span class="guilabel">text_result</span>.</li>
<li>Set the name of the radio box to <span class="guilabel">radiobox_operator</span></li>
<li>Set the labels to <span class="guilabel">Value 2:</span> and <span class="guilabel">Result:</span></li>
<li>Set the name of the first button to <span class="guilabel">button_execute</span> and the label to <span class="guilabel">Execute</span>.</li>
<li>Set the name of the second button to <span class="guilabel">button_reset</span> and the label to <span class="guilabel">Reset</span>.</li>
</ul>
<p>For our example project where multiple labels and names have to be modified, it’s much faster to do so in the <em>Tree</em>
window.</p>
<p>Example for editing in the <em>Tree</em> view of the main window:</p>
<blockquote>
<div></div></blockquote>
<ul class="simple">
<li>The name is <span class="guilabel">button_1</span> and the label is <span class="guilabel">button_1</span></li>
<li>The displayed text in the <em>Tree</em> window is <span class="guilabel">button_1: “button_1”</span>  <br/>
<img alt="Tree_Rename0" src="_images/Tree_Rename0.png" /></li>
<li>Change to <span class="guilabel">button_execute: “Execute”</span>  <br/>
<img alt="Tree_Rename1" src="_images/Tree_Rename1.png" /></li>
</ul>
<p><strong>The Tree structure of your design should now look like this:</strong></p>
<table border="1" class="docutils">
<colgroup>
<col width="100%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td><a class="first last reference internal image-reference" href="_images/Calculator_02_Tree.png"><img alt="_images/Calculator_02_Tree.png" src="_images/Calculator_02_Tree.png" style="width: 150px;" /></a>
</td>
</tr>
</tbody>
</table>
<p>The file can be found in the folder <code class="docutils literal"><span class="pre">wxglade/examples/Calculator</span></code>:
<a class="reference external" href="../../examples/Calculator/Calculator-02.wxg">Calculator-02.wxg</a></p>
</div>
<div class="section" id="final-steps-layout">
<h3>Final Steps: Layout<a class="headerlink" href="#final-steps-layout" title="Permalink to this headline">¶</a></h3>
<p><strong>Your design should now look like this:</strong></p>
<table border="1" class="docutils">
<colgroup>
<col width="100%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td><a class="first last reference internal image-reference" href="_images/Calculator_02.png"><img alt="_images/Calculator_02.png" src="_images/Calculator_02.png" style="width: 150px;" /></a>
</td>
</tr>
</tbody>
</table>
<p>So all elements are there, but the layout is not yet what we want to have:</p>
<ol class="arabic">
<li><p class="first">We want the rows with the values, operators and buttons <strong>not to grow vertically</strong>:</p>
<ul class="simple">
<li>select one of the horizontal sizers (e.g. <span class="guilabel">sizer_2</span> around <span class="guilabel">Value 1</span>)</li>
<li>set <em>Properties -&gt; Layout -&gt; Proportion</em> to <span class="guilabel">0</span></li>
<li>select the next of the sizers (e.g. around <span class="guilabel">Operator</span>)</li>
<li>either set <em>Properties -&gt; Layout -&gt; Proportion</em> to <span class="guilabel">0</span>
or just hit <code class="kbd docutils literal"><span class="pre">Ctrl-Y</span></code> to apply the last change to the selected sizer</li>
<li>do the same for the remaining sizers (e.g. around <span class="guilabel">Value 2</span> and the buttons)</li>
</ul>
</li>
<li><p class="first">We want the text controls to <strong>grow horizontally</strong> to fill the available space:</p>
<ul class="simple">
<li>select one of the text controls (e.g. <span class="guilabel">text_value1</span>)</li>
<li>set <em>Properties -&gt; Layout -&gt; Proportion</em> to <span class="guilabel">1</span></li>
<li>do the same for the other controls, either by modifying the Proportion properties
or by hitting <code class="kbd docutils literal"><span class="pre">Ctrl-Y</span></code> to apply the last change to the selected control</li>
</ul>
</li>
<li><p class="first">The labels <span class="guilabel">Value 1</span>, <span class="guilabel">Operator</span> and <span class="guilabel">Value 2</span> should better
<strong>align vertically</strong> with their text controls:</p>
<ul class="simple">
<li>select label</li>
<li>set the checkbox <em>Properties -&gt; Layout -&gt; Alignment -&gt;</em> <span class="guilabel">wxALIGN_CENTER_VERTICAL</span></li>
<li>do the same for the other two labels</li>
</ul>
</li>
<li><p class="first">We want the Result text control to <strong>fill the available vertical space</strong>:</p>
<ul class="simple">
<li>select text control</li>
<li>set the checkbox <em>Properties -&gt; Layout -&gt; Alignment -&gt;</em> <span class="guilabel">wxEXPAND</span></li>
</ul>
</li>
<li><p class="first">We want the buttons at the bottom to be <strong>centered</strong>; so the layout of the sizer around them needs to be set:</p>
<ul class="simple">
<li>select sizer</li>
<li>go to <em>Properties -&gt; Layout -&gt; Alignment</em></li>
<li>de-select the checkbox <span class="guilabel">wxEXPAND</span></li>
<li>select the checkbox <span class="guilabel">wxALIGN_CENTER_HORIZONTAL</span></li>
</ul>
</li>
<li><p class="first">We want a small <strong>border above and beyond</strong> the horizontal line and around each of the buttons:</p>
<ul class="simple">
<li>select the horizontal line <span class="guilabel">static_line_1</span></li>
<li>set <em>Properties -&gt; Layout -&gt; Border</em> to <span class="guilabel">5</span></li>
<li>uncheck <em>Properties -&gt; Layout -&gt; Border -&gt;</em> <span class="guilabel">wxLEFT</span> and <span class="guilabel">wxRIGHT</span></li>
<li>select the first button</li>
<li>set <em>Properties -&gt; Layout -&gt; Border</em> to <span class="guilabel">5</span></li>
<li>do the same with the second button (e.g. by selecting it and then hitting <code class="kbd docutils literal"><span class="pre">Ctrl-Y</span></code>)</li>
</ul>
</li>
<li><p class="first">We want a small <strong>border around</strong> beyond the pairs of label and value:</p>
<ul class="simple">
<li>select the horizontal sizer <span class="guilabel">sizer_2</span> around the first line</li>
<li>set <em>Properties -&gt; Layout -&gt; Border</em> to <span class="guilabel">4</span></li>
<li>do the same with the sizers around <span class="guilabel">Operator</span> and <span class="guilabel">Value 2</span></li>
</ul>
<p>(e.g. by selecting it and then hitting <code class="kbd docutils literal"><span class="pre">Ctrl-Y</span></code>)</p>
</li>
</ol>
<p>At this point, it’s time for a <strong>preview</strong>: <br/>
Select “Preview” from the context menu or the main menu or from the <em>Properties</em> notebook when the frame is selected.
Alternatively, press <code class="kbd docutils literal"><span class="pre">F5</span></code></p>
<table border="1" class="docutils">
<colgroup>
<col width="100%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td><a class="first last reference internal image-reference" href="_images/Calculator_03_preview.png"><img alt="_images/Calculator_03_preview.png" src="_images/Calculator_03_preview.png" style="width: 150px;" /></a>
</td>
</tr>
</tbody>
</table>
<p>This file can be found in the folder <code class="docutils literal"><span class="pre">wxglade/examples/Calculator</span></code>:
<a class="reference external" href="../../examples/Calculator/Calculator-03.wxg">Calculator-03.wxg</a>.</p>
<p>If you are curious how a design turns into Python source code, you may have a look at the section <a class="reference internal" href="source_code.html"><span class="doc">Create and Use Source Code</span></a> before going through the next sections.
<br/>
Actually, “Preview” internally creates and executes Python source code.</p>
</div>
<div class="section" id="excursion-layout-properties-proportion-and-alignment-wxexpand">
<h3>Excursion: Layout properties: Proportion and Alignment-&gt;wxEXPAND:<a class="headerlink" href="#excursion-layout-properties-proportion-and-alignment-wxexpand" title="Permalink to this headline">¶</a></h3>
<p>The “Proportion” of <span class="guilabel">1</span> makes the element grow with a proportional factor of 1 when the horizontal sizer is growing. Please note that this growth happens only in the “main” direction of the sizer; the sizer is horizontal, so this change makes the text control grow in width.
<br/>
For a growth in the other direction, <span class="guilabel">wxEXPAND</span> in the “Alignment” box would need to be checked.</p>
<p><br/>
You may try this to see the difference:</p>
<table border="1" class="docutils align-center">
<colgroup>
<col width="50%" />
<col width="50%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td>Horizontal Sizer: Proportion 0 <br/>
TextCtrl: Proportion 0
<br/> <br/>
The first row occupies the minimum height as <br/>
defined by the label and the text control.
<br/> <br/>
The text control occupies its minimum width, as defined.</td>
<td><a class="reference internal" href="_images/Calculator06_P0P0.png"><img alt="Horizontal Sizer: Proportion 0, Text Ctrl: Proportion 0 -&gt; no growth" src="_images/Calculator06_P0P0.png" style="width: 200px;" /></a></td>
</tr>
<tr class="row-even"><td>Horizontal Sizer: <strong>Proportion 1</strong> <br/>
TextCtrl: Proportion 0 <br/> <br/>
The first row consists of the horizontal sizer. <br/>
It grew vertically, as it is placed in a vertical sizer.</td>
<td><a class="reference internal" href="_images/Calculator06_P1P0.png"><img alt="Horizontal Sizer: Proportion 1 -&gt; the sizer slot grows vertically, as it is within a vertical sizer" src="_images/Calculator06_P1P0.png" style="width: 200px;" /></a></td>
</tr>
<tr class="row-odd"><td>Horizontal Sizer: Proportion 1 <br/>
TextCtrl: <strong>Proportion 1</strong> <br/> <br/>
The text control grew in width, as it is in a horizontal sizer.
<br/> <br/></td>
<td><a class="reference internal" href="_images/Calculator06_P1P1.png"><img alt="Text Ctrl: Proportion 1 -&gt; the control grows horizontally, as it is within a horizontal sizer" src="_images/Calculator06_P1P1.png" style="width: 200px;" /></a></td>
</tr>
<tr class="row-even"><td>Horizontal Sizer: Proportion 1 <br/>
TextCtrl: Proportion 1, <strong>EXPAND</strong> <br/> <br/>
The text control expanded vertically, i.e. perpendicular <br/>
to the main direction of the surrounding horizontal sizer.
<br/> <br/></td>
<td><a class="reference internal" href="_images/Calculator06_P1P1EX.png"><img alt="Text Ctrl: EXPAND -&gt; the control expands vertically, as it is within a horizontal sizer" src="_images/Calculator06_P1P1EX.png" style="width: 200px;" /></a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="section" id="part-3-add-a-notebook">
<h2>Part 3: Add a Notebook<a class="headerlink" href="#part-3-add-a-notebook" title="Permalink to this headline">¶</a></h2>
<p>For many applications it’s desirable to place the GUI elements on a notebook control.
For our calculator e.g. we may want to have the controls on the first page and a log on the second page:</p>
<table border="1" class="docutils">
<colgroup>
<col width="100%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td><a class="first reference internal image-reference" href="_images/Calculator_Notebook_Design.png"><img alt="Calculator with a notebook: Design Window" src="_images/Calculator_Notebook_Design.png" style="height: 120px;" /></a>
<a class="last reference internal image-reference" href="_images/Calculator_Notebook_Tree.png"><img alt="Calculator with a notebook: Tree Window" src="_images/Calculator_Notebook_Tree.png" style="height: 120px;" /></a>
</td>
</tr>
</tbody>
</table>
<p>A notebook can be added to an empty sizer slot or as direct child of a frame, splitter or another notebook.
In our case, we want to keep the existing controls.
So we cut the panel sizer, add a notebook and then paste the panel to the first notebook page.</p>
<p><strong>Cut the toplevel panel:</strong></p>
<ul class="simple">
<li>Go to the toplevel panel <span class="guilabel">panel_1</span> in the <em>Tree</em> view or the <em>Design</em> window
and select “Cut” or hit <code class="kbd docutils literal"><span class="pre">Ctrl-X</span></code>:</li>
</ul>
<table border="1" class="docutils">
<colgroup>
<col width="100%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td><a class="reference internal" href="_images/Calculator_Notebook_CutPanel.png"><img alt="Right mouse click on panel -&gt; &quot;Cut&quot;" src="_images/Calculator_Notebook_CutPanel.png" style="height: 120px;" /></a></td>
</tr>
</tbody>
</table>
<p>The panel and it’s children are now on the clipboard and can be pasted back later.
The frame does not have a child now; this is visualized by an empty slot. Note that in the Tree view
this <span class="guilabel">SLOT</span> looks different from a sizer slot:</p>
<table border="1" class="docutils">
<colgroup>
<col width="100%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td><a class="reference internal" href="_images/Calculator_Notebook_FrameSlot.png"><img alt="Frame without child, visualized with just an empty SLOT" src="_images/Calculator_Notebook_FrameSlot.png" style="height: 120px;" /></a></td>
</tr>
</tbody>
</table>
<p><strong>Add a notebook:</strong></p>
<ul class="simple">
<li>click on the Notebook icon <img alt="notebook" src="_images/notebook.png" /> in the section “Containers” of the <em>Palette</em> panel to start placing a notebook</li>
<li>click on the hatched area in the <em>Design</em> window or on the frame’s slot <a href="#id2"><span class="problematic" id="id3">|frame_slot|</span></a> in the <em>Tree</em> control of the
main window</li>
<li>in the dialog, select <span class="guilabel">wxNB_TOP</span> to place the notebook tabs at the top;
keep “Pages” <span class="guilabel">1</span> and uncheck <span class="guilabel">Add panels</span>.</li>
</ul>
<p>The newly created notebook will have one page already, which does not contain anything.
It will have a default name like <span class="guilabel">notebook_1_pane_1</span>.</p>
<p><strong>Paste the panel to the notebook page:</strong></p>
<blockquote>
<div><ul class="simple">
<li>Go to the empty notebook page <span class="guilabel">[notebook_1_pane_1]</span> in the <em>Tree</em> view or the <em>Design</em> window
and select “Paste” or hit <code class="kbd docutils literal"><span class="pre">Ctrl-V</span></code>:</li>
</ul>
</div></blockquote>
<p>The panel including sizer and all controls is now the first page of the notebook:</p>
<table border="1" class="docutils">
<colgroup>
<col width="100%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td><a class="reference internal" href="_images/Calculator_Notebook_Pasted.png"><img alt="Calculator_Notebook_Pasted" src="_images/Calculator_Notebook_Pasted.png" style="height: 120px;" /></a></td>
</tr>
</tbody>
</table>
<p><strong>Add second notebook page and set the tab labels:</strong></p>
<table border="1" class="docutils">
<colgroup>
<col width="50%" />
<col width="50%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td><ul class="first last simple">
<li>click on the notebook <br/>
in the <em>Design</em> window or the <em>Tree</em> window</li>
<li>the <em>Properties</em> window should now display <br/>
the property editor for the notebook</li>
<li>go to the tab “Widget”, click “Add” to add a page and <br/>
enter the headings for the notebook pages</li>
<li>click the “Apply” button</li>
</ul>
</td>
<td><a class="reference internal" href="_images/Calculator_Notebook.png"><img alt="Calculator_Notebook" src="_images/Calculator_Notebook.png" style="height: 160px;" /></a></td>
</tr>
</tbody>
</table>
<p>Alternatively, you may select “Add Notebook Tab” in the <em>Tree</em> view or the <em>Design</em> window and rename the tabs in
the <em>Tree</em> view. E.g. by changing <span class="guilabel">[notebook_1_pane_1] panel_1</span> to <span class="guilabel">[Calculator] panel_1</span>.</p>
<p>Once you are familiar with the <em>Tree</em> view, this is the fastest way.</p>
<table border="1" class="docutils">
<colgroup>
<col width="100%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td><a class="reference internal" href="_images/Calculator_Notebook_Renaming.png"><img alt="Calculator_Notebook_Renaming" src="_images/Calculator_Notebook_Renaming.png" style="height: 120px;" /></a></td>
</tr>
<tr class="row-even"><td><a class="reference internal" href="_images/Calculator_Notebook_Adding.png"><img alt="Calculator_Notebook_Adding" src="_images/Calculator_Notebook_Adding.png" style="height: 120px;" /></a></td>
</tr>
</tbody>
</table>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">After adding a page to a notebook, this will contain a panel by default.
You may delete this if you want e.g. to place a splitter on the page or e.g. a text control that should fill the
whole page.</p>
</div>
<p><strong>Fill the second page:</strong></p>
<p>There are two ways to place the text control on the second page:</p>
<ol class="arabic simple">
<li>Add a single-slot sizer to the notebook page panel. Then place the text control in the sizer slot.</li>
<li>Remove the panel from the notebook page and add a text control instead.</li>
</ol>
<p>Here we will take the second option:</p>
<ul class="simple">
<li>remove the panel (which probably has the name <span class="guilabel">notebook_1_pane_1</span>)</li>
<li>the empty page will be displayed in the <em>Tree</em> view as <span class="guilabel">PAGE 1</span></li>
<li>add a text control to <span class="guilabel">PAGE 1</span></li>
<li>set the widget style to <span class="guilabel">wxTE_MULTILINE</span> and <span class="guilabel">wxTE_READONLY</span></li>
<li>set the widget background color to <span class="guilabel">wxSYS_COLOUR_BTNFACE</span></li>
<li>rename to <span class="guilabel">text_log</span></li>
</ul>
<p>This file can be found in the folder <code class="docutils literal"><span class="pre">wxglade/examples/Calculator</span></code>:
<a class="reference external" href="../../examples/Calculator/Calculator-04-Notebook.wxg">Calculator-04-Notebook.wxg</a></p>
</div>
<div class="section" id="part-4-use-of-spacers">
<h2>Part 4: Use of Spacers<a class="headerlink" href="#part-4-use-of-spacers" title="Permalink to this headline">¶</a></h2>
<p>Sometimes you need to keep some space in a sizer, either with a fixed size or growable, e.g. to have a gap between two controls or to align two controls to the left and the right edge of a window or to align a control to the center.</p>
<p>To add a spacer, click the Spacer icon <img alt="spacer" src="_images/spacer.png" /> and place it in a sizer slot.</p>
<p>In our example, we may place a spacer to the left and right of the operator radio box to center it:</p>
<table border="1" class="docutils align-center">
<colgroup>
<col width="50%" />
<col width="50%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td><ul class="first last simple">
<li>add two empty slots to the left and right:  <br/>
(To add the slots, right-click on the radio box in the <em>Tree</em> or the <em>Design</em> window and select
“Insert Slot before” and “Add Slot”.)</li>
</ul>
</td>
<td><a class="reference internal" href="_images/Calculator_Spacers_Design0.png"><img alt="Calculator with empty slots for spacers" src="_images/Calculator_Spacers_Design0.png" style="width: 180px;" /></a></td>
</tr>
<tr class="row-even"><td><ul class="first last simple">
<li>insert spacers <img alt="spacer" src="_images/spacer.png" /> into these slots <br/> (e.g. with “Width” <span class="guilabel">20</span> and
“Height” <span class="guilabel">20</span>)</li>
<li>set “Proportion” to <span class="guilabel">1</span> <br/>
to make them grow</li>
</ul>
</td>
<td><a class="reference internal" href="_images/Calculator_Spacers_Design.png"><img alt="Calculator with Spacers" src="_images/Calculator_Spacers_Design.png" style="width: 180px;" /></a></td>
</tr>
<tr class="row-odd"><td><br/> In the <em>Tree</em> view you can see the structure:</td>
<td><a class="reference internal" href="_images/Calculator_Spacers_Tree.png"><img alt="Calculator with Spacers: Tree" src="_images/Calculator_Spacers_Tree.png" style="width: 180px;" /></a></td>
</tr>
<tr class="row-even"><td><br/> In the <em>Properties</em> notebook you can see <br/>
the settings to make the spacers grow:</td>
<td><a class="reference internal" href="_images/Calculator_Spacers_Properties.png"><img alt="Spacer Properties" src="_images/Calculator_Spacers_Properties.png" style="width: 180px;" /></a></td>
</tr>
<tr class="row-odd"><td>As the spacers have a height of <span class="guilabel">20</span>, they’re now looking a bit odd in the <em>Design</em> window. <br/>
You may want to make them disappear by setting the theight to <span class="guilabel">0</span> or to fill the available space
by checking <span class="guilabel">EXPAND</span>. <br/>
For the actual window this will not make a difference in this case.</td>
<td><a class="reference internal" href="_images/Calculator_Spacers2.png"><img alt="One spacer with height 10 and one with 20" src="_images/Calculator_Spacers2.png" style="width: 180px;" /></a></td>
</tr>
</tbody>
</table>
<p>This file can be found in the folder <code class="docutils literal"><span class="pre">wxglade/examples/Calculator</span></code>:
<a class="reference external" href="../../examples/Calculator/Calculator-05-Spacers.wxg">Calculator-05-Spacers.wxg</a></p>
</div>
<div class="section" id="part-5-use-of-grid-sizers">
<h2>Part 5: Use of Grid Sizers<a class="headerlink" href="#part-5-use-of-grid-sizers" title="Permalink to this headline">¶</a></h2>
<p>The current version doesn’t look perfect as the controls are not vertically aligned.
To change this, the labels can be modified to have the same fixed size.
This may cause problems when running on a different platform with a different font size.
Instead, we will now move the controls into a grid sizer.</p>
<p>There are three grid sizers which are supported by wxGlade:</p>
<ul class="simple">
<li><em>GridSizer</em>: all columns have the same width, all rows have the same height</li>
<li><em>FlexGridSizer</em>: all rows and columns may have different sizes. <br/>
Any row(s) and/or column(s) can be defined to be ‘growable’</li>
<li><em>GridBagSizer</em>: a grid that allows items to span multiple rows or columns. <br/>
The editing logic is a bit different from the other sizers.</li>
</ul>
<p>For our calculator we need the <em>FlexGridSizer</em> as the first column is fixed and the second column should grow.
The result will look like this:</p>
<table border="1" class="docutils">
<colgroup>
<col width="100%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td><a class="reference internal" href="_images/CalculatorFlexGridSizerDesign.png"><img alt="CalculatorFlexGridSizer Design" src="_images/CalculatorFlexGridSizerDesign.png" style="height: 150px;" /></a> <a class="reference internal" href="_images/CalculatorFlexGridSizerTree.png"><img alt="CalculatorFlexGridSizer Tree" src="_images/CalculatorFlexGridSizerTree.png" style="height: 150px;" /></a></td>
</tr>
</tbody>
</table>
<p><strong>To get there:</strong></p>
<p>(You may want to start from
<a class="reference external" href="../../examples/Calculator/Calculator-05-Spacers.wxg">Calculator-05-Spacers.wxg</a>
if your current file is too different, e.g. because you did not complete Part 4 above.)</p>
<ul class="simple">
<li>Insert/add a slot to the vertical sizer inside the notebook and panel: <br/>
<a class="reference internal" href="_images/Calculator_GridSizer_InsertSlot.png"><img alt="InsertSlot into vertical sizer: right mouse click on sizer XXX" src="_images/Calculator_GridSizer_InsertSlot.png" style="height: 80px;" /></a></li>
<li>Add a GridSizer <img alt="grid_sizer" src="_images/grid_sizer.png" /> to this slot</li>
<li>In the grid sizer dialog, select <span class="guilabel">FlexGrid</span>, <span class="guilabel">4</span> rows and <span class="guilabel">2</span> cols: <br/>
<a class="reference internal" href="_images/FlexGridSizerDlg.png"><img alt="FlexGridSizer Dialog" src="_images/FlexGridSizerDlg.png" style="height: 80px;" /></a></li>
<li>Move the labels and controls to the slots of the newly created sizer.</li>
<li>Delete the old sizers and spacers.</li>
<li>In <em>Properties -&gt; Grid</em>: make column 2 and row 4 growable: <br/>
<a class="reference internal" href="_images/FlexGridSizer_Properties.png"><img alt="FlexGridSizer Properties" src="_images/FlexGridSizer_Properties.png" style="height: 80px;" /></a></li>
<li>To make the text controls <span class="guilabel">text_value1</span> and <span class="guilabel">text_value2</span> actually fill the growable column: <br/>
activate <em>Properties -&gt; Layout -&gt; Alignment -&gt;</em> <span class="guilabel">wxEXPAND</span> for both of them.</li>
</ul>
<p>The logic with <span class="guilabel">wxEXPAND</span> is a bit different than with non-grid sizers.
If it is active, the control will grow horizontally and vertically.
If you want to avoid this, you need to add a horizontal or vertical box sizer ‘between’ grid sizer and control.</p>
<p>This file can be found in the folder <code class="docutils literal"><span class="pre">wxglade/examples/Calculator</span></code>:
<a class="reference external" href="../../examples/Calculator/Calculator-06-GridSizer.wxg">Calculator-06-GridSizer.wxg</a></p>
</div>
<div class="section" id="summary">
<h2>Summary<a class="headerlink" href="#summary" title="Permalink to this headline">¶</a></h2>
<p>You should know by now how to</p>
<blockquote>
<div><ul class="simple">
<li>create a window structure without menu, tool or status bar</li>
<li>lay out and align controls using sizers</li>
<li>edit the structure in the <em>Design</em> window and the <em>Tree</em> view, including Cut/Copy/Paste and Drag and Drop</li>
<li>modify layout and other properties in the <em>Properties</em> notebook</li>
</ul>
</div></blockquote>
<p>Some things to remember, to save you a lot of work:</p>
<blockquote>
<div><ul class="simple">
<li>Names and labels can be edited directly in the in the <em>Tree</em> view.</li>
<li>When you want to apply changes to multiple widgets, edit the first, then go to the next and use
Re-do or Repeat to apply one or more changes:<ul>
<li>Re-do: <code class="kbd docutils literal"><span class="pre">Ctrl-Y</span></code> or “Edit-&gt;Re-do” or toolbar right-arrow</li>
<li>Repeat: <code class="kbd docutils literal"><span class="pre">Ctrl-R</span></code> or “Edit-&gt;Re-do” or toolbar second right-arrow</li>
</ul>
</li>
</ul>
</div></blockquote>
<p>Please keep in mind how to create a good structure:</p>
<blockquote>
<div><ul class="simple">
<li>Always use the simplest available sizers.
Usually you will need mainly box sizers and maybe one or two FlexGridSizers.</li>
<li>Use nested sizers to match the hierarchical / logical structure of your project. This will make it easy
to re-arrange things to find the best user interface.</li>
<li>Never ever try to use a grid sizer as main sizer of a window trying to resemble pixel placement or
Tkinter’s grid geometry manager. This is a mess to create and maintain.</li>
</ul>
</div></blockquote>
</div>
<div class="section" id="next-steps">
<h2>Next steps<a class="headerlink" href="#next-steps" title="Permalink to this headline">¶</a></h2>
<blockquote>
<div><ul class="simple">
<li>create source code and add event handlers - see <a class="reference internal" href="source_code.html"><span class="doc">Create and Use Source Code</span></a></li>
<li>add a menu - see <a class="reference internal" href="menu_status_tool.html"><span class="doc">Menu, Status Bar, Tool Bar</span></a></li>
</ul>
</div></blockquote>
</div>
</div>


          </div>
        </div>
      </div>
      <div class="sphinxsidebar" role="navigation" aria-label="main navigation">
        <div class="sphinxsidebarwrapper">
            <p class="logo"><a href="index.html">
              <img class="logo" src="_static/wxglade.png" alt="Logo"/>
            </a></p>
  <h3><a href="index.html">Table Of Contents</a></h3>
  <ul>
<li><a class="reference internal" href="#">Tutorial Project: Calculator</a><ul>
<li><a class="reference internal" href="#part-1-create-calculator-window-and-the-first-widget">Part 1: Create Calculator window and the first widget</a><ul>
<li><a class="reference internal" href="#create-the-basic-structure">Create the basic structure:</a></li>
<li><a class="reference internal" href="#adjust-properties">Adjust properties:</a></li>
</ul>
</li>
<li><a class="reference internal" href="#part-2-add-the-remaining-rows-and-widgets">Part 2: Add the remaining rows and widgets</a><ul>
<li><a class="reference internal" href="#there-are-several-methods-to-copy">There are several methods to copy:</a></li>
<li><a class="reference internal" href="#further-editing">Further Editing</a></li>
<li><a class="reference internal" href="#change-labels-and-names">Change labels and names:</a></li>
<li><a class="reference internal" href="#final-steps-layout">Final Steps: Layout</a></li>
<li><a class="reference internal" href="#excursion-layout-properties-proportion-and-alignment-wxexpand">Excursion: Layout properties: Proportion and Alignment-&gt;wxEXPAND:</a></li>
</ul>
</li>
<li><a class="reference internal" href="#part-3-add-a-notebook">Part 3: Add a Notebook</a></li>
<li><a class="reference internal" href="#part-4-use-of-spacers">Part 4: Use of Spacers</a></li>
<li><a class="reference internal" href="#part-5-use-of-grid-sizers">Part 5: Use of Grid Sizers</a></li>
<li><a class="reference internal" href="#summary">Summary</a></li>
<li><a class="reference internal" href="#next-steps">Next steps</a></li>
</ul>
</li>
</ul>

  <h4>Previous topic</h4>
  <p class="topless"><a href="wxbasics.html"
                        title="previous chapter">wx Basics</a></p>
  <h4>Next topic</h4>
  <p class="topless"><a href="source_code.html"
                        title="next chapter">Create and Use Source Code</a></p>
  <div role="note" aria-label="source link">
    <h3>This Page</h3>
    <ul class="this-page-menu">
      <li><a href="_sources/tutorial.rst.txt"
            rel="nofollow">Show Source</a></li>
    </ul>
   </div>
<div id="searchbox" style="display: none" role="search">
  <h3>Quick search</h3>
    <form class="search" action="search.html" method="get">
      <div><input type="text" name="q" /></div>
      <div><input type="submit" value="Go" /></div>
      <input type="hidden" name="check_keywords" value="yes" />
      <input type="hidden" name="area" value="default" />
    </form>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
    <div class="related" role="navigation" aria-label="related navigation">
      <h3>Navigation</h3>
      <ul>
        <li class="right" style="margin-right: 10px">
          <a href="genindex.html" title="General Index"
             >index</a></li>
        <li class="right" >
          <a href="source_code.html" title="Create and Use Source Code"
             >next</a> |</li>
        <li class="right" >
          <a href="wxbasics.html" title="wx Basics"
             >previous</a> |</li>
        <li class="nav-item nav-item-0"><a href="index.html">wxGlade 1.1.0b1 documentation</a> &#187;</li> 
      </ul>
    </div>
    <div class="footer" role="contentinfo">
        &#169; Copyright 2017-2020, Dietmar Schwertberger.
      Created using <a href="http://sphinx-doc.org/">Sphinx</a> 1.6.4.
    </div>
  </body>
</html>